<!DOCTYPE html>
<!-- 声明文档类型为 HTML5 -->
<html lang="en">
<!-- 设定 HTML 文档的语言为英语 -->

<head>
    <!-- 网页头部信息，包含元数据、标题、脚本和样式等 -->
    <meta charset="UTF-8">
    <!-- 设置字符编码为 UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 设置页面在不同设备上的自适应显示 -->
    <title>青少年女性连衣裙季节销售分析</title>
    <!-- 网页标题，显示在浏览器标签上 -->
    <!-- 引入 ECharts 库，用于创建各种图表 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
    <!-- 引入 ECharts GL 3D 扩展，用于创建 3D 图表 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts-gl@2.0.9/dist/echarts-gl.min.js"></script>
    <!-- 引入 Tailwind CSS，用于快速搭建网页样式 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入 Font Awesome 图标库，用于添加图标 -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入 Inter 字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        /* 以下是自定义的 CSS 样式 */
        body {
            /* 隐藏水平滚动条 */
            overflow-x: hidden;
            /* 设置字体为 Inter */
            font-family: 'Inter', sans-serif;
            /* 设置背景为渐变颜色 */
            background: linear-gradient(135deg, #483f57 0%, #1A0A42 100%);
            /* 设置文字颜色 */
            color: #E2E8F0;
            /* 去除默认的外边距和内边距 */
            margin: 0;
            padding: 0;
        }

        #bg-canvas {
            /* 设置画布为固定定位，覆盖整个页面 */
            position: fixed;
            top: 0;
            left: 0;
            /* 将画布置于底层 */
            z-index: -1;
        }

        #sales-analysis-container {
            /* 设置内边距 */
            padding: 20px;
            /* 设置文字颜色为白色 */
            color: white;
            /* 设置容器高度为视口高度 */
            height: 100vh;
            /* 当内容超出容器时显示垂直滚动条 */
            overflow-y: auto;
        }

        .chart-container {
            /* 设置图表容器的背景颜色和透明度 */
            background: rgba(30, 41, 59, 0.7);
            /* 设置圆角 */
            border-radius: 12px;
            /* 设置内边距 */
            padding: 1rem;
            /* 设置过渡效果，使鼠标悬停时的变化更平滑 */
            transition: all 0.3s ease;
        }

        .chart-container:hover {
            /* 鼠标悬停时添加阴影效果 */
            box-shadow: 0 10px 25px -5px rgba(79, 158, 253, 0.1);
            /* 鼠标悬停时向上移动 2px */
            transform: translateY(-2px);
        }

        .chart-title {
            /* 去除标题的顶部外边距 */
            margin-top: 0;
            /* 设置标题的底部外边距 */
            margin-bottom: 15px;
            /* 设置标题的字体大小 */
            font-size: 1.5rem;
            /* 设置标题的文字颜色 */
            color: #E2E8F0;
        }

        .chart-wrapper {
            /* 设置图表包装器的宽度为 100% */
            width: 100%;
            /* 设置图表包装器的高度 */
            height: 400px;
        }

        .grid-container {
            /* 使用网格布局 */
            display: grid;
            /* 设置网格列的宽度，自动填充，最小宽度为 400px，最大宽度为 1fr */
            grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
            /* 设置网格项之间的间距 */
            gap: 20px;
        }

        @media (max-width: 768px) {
            /* 当屏幕宽度小于等于 768px 时的样式 */
            .grid-container {
                /* 将网格布局改为单列 */
                grid-template-columns: 1fr;
            }

            .chart-wrapper {
                /* 减小图表包装器的高度 */
                height: 300px;
            }
        }

        /* 侧边栏样式 */
       .sidebar {
            /* 设置侧边栏的高度为视口高度 */
            height: 100vh;
            /* 设置侧边栏的宽度 */
            width: 240px;
            /* 设置侧边栏为固定定位 */
            position: fixed;
            top: 0;
            left: 0;
            /* 设置侧边栏的层级 */
            z-index: 100;
            /* 当内容超出侧边栏时显示垂直滚动条 */
            overflow-y: auto;
            /* 设置侧边栏宽度变化的过渡效果 */
            transition: width 0.3s ease;
            /* 设置侧边栏的背景颜色和透明度 */
            background-color: rgba(30, 41, 59, 0.85);
        }

       .sidebar-item {
            /* 使用弹性布局 */
            display: flex;
            /* 垂直居中对齐 */
            align-items: center;
            /* 设置内边距 */
            padding: 12px 16px;
            /* 设置文字颜色 */
            color: #94A3B8;
            /* 设置过渡效果，使鼠标悬停时的变化更平滑 */
            transition: all 0.3s ease;
        }

       .sidebar-item.active {
            /* 激活状态下的文字颜色 */
            color: #B399D4;
            /* 激活状态下的背景颜色和透明度 */
            background-color: rgba(179, 153, 212, 0.1);
        }

       .sidebar-item:hover {
            /* 鼠标悬停时的文字颜色 */
            color: #B399D4;
            /* 鼠标悬停时的背景颜色和透明度 */
            background-color: rgba(179, 153, 212, 0.05);
        }

       .sidebar-icon {
            /* 设置图标与文字之间的间距 */
            margin-right: 12px;
        }

       .main-content {
            /* 设置主内容区的左边距，避免被侧边栏覆盖 */
            margin-left: 240px;
            /* 设置主内容区的内边距 */
            padding: 20px;
        }
    </style>
    <script>
        // 配置 Tailwind CSS 的主题
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        // 自定义颜色
                        primary: '#4F9EFD',
                        secondary: '#96C2FF',
                        tertiary: '#E8F3FF',
                        dark: '#1E3A8A',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        // 自定义字体
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
</head>

<body>
    <!-- 主题切换按钮 -->
    <div class="theme-toggle fixed top-4 right-4 z-50">
        <button id="toggle-theme" class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 p-2 rounded-full shadow-lg hover:shadow-xl transition-all duration-300">
            <i class="fa fa-moon-o"></i>
        </button>
    </div>

    <!-- 动态背景画布 -->
    <canvas id="bg-canvas"></canvas>
    <!-- 侧边栏导航 -->
    <div class="sidebar bg-glass shadow-lg" id="sidebar">
        <div class="p-4 border-b">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <div class="bg-primary text-white p-2 rounded-lg mr-3">
                        <i class="fa fa-line-chart text-xl"></i>
                    </div>
                    <h1 class="text-xl font-bold text-dark sidebar-text">销售分析系统</h1>
                </div>
                <button id="toggle-sidebar" class="text-gray-500 hover:text-primary">
                    <i class="fa fa-bars"></i>
                </button>
            </div>
        </div>

        <div class="py-4">
            <!-- 侧边栏导航链接 -->
            <a href="dashboard.html" class="sidebar-item">
                <i class="fa fa-dashboard sidebar-icon"></i>
                <span class="sidebar-text">销售总览</span>
            </a>
            <a href="customer.html" class="sidebar-item">
                <i class="fa fa-users sidebar-icon"></i>
                <span class="sidebar-text">客户画像</span>
            </a>
            <a href="marketing.html" class="sidebar-item">
                <i class="fa fa-bullhorn sidebar-icon"></i>
                <span class="sidebar-text">营销效果</span>
            </a>
            <!-- 添加季节销售分析链接 -->
            <a href="season.html" class="sidebar-item active">
                <i class="fa fa-calendar sidebar-icon"></i>
                <span class="sidebar-text">季节销售分析</span>
            </a>
            <a href="user.html" class="sidebar-item">
                <i class="fa fa-user-circle sidebar-icon"></i>
                <span class="sidebar-text">用户管理</span>
            </a>
        </div>

        <div class="absolute bottom-0 w-full p-4 border-t">
            <div class="flex items-center">
                <img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="w-10 h-10 rounded-full object-cover">
                <div class="ml-3">
                    <p class="text-sm font-medium text-dark sidebar-text">管理员</p>
                    <p class="text-xs text-gray-500 sidebar-text">admin@example.com</p>
                </div>
                <button id="logout-btn" class="ml-auto text-gray-500 hover:text-red-500">
                    <i class="fa fa-sign-out"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
        <div id="sales-analysis-container">
            <h1 class="text-center mb-6">青少年女性连衣裙季节销售分析</h1>

            <div class="grid-container">
                <div class="chart-container">
                    <h2 class="chart-title">季节销售趋势分析</h2>
                    <div class="chart-wrapper" id="season-sales-chart"></div>
                </div>
                <div class="chart-container">
                    <h2 class="chart-title">季节销售 3D 分析</h2>
                    <div class="chart-wrapper" id="season-3d-chart"></div>
                </div>
                <div class="chart-container">
                    <h2 class="chart-title">月度销售波动</h2>
                    <div class="chart-wrapper" id="monthly-sales-chart"></div>
                </div>
            </div>

            <div class="grid-container">
                <div class="chart-container">
                    <h2 class="chart-title">连衣裙款式销售占比</h2>
                    <div class="chart-wrapper" id="style-pie-chart"></div>
                </div>

                <div class="chart-container">
                    <h2 class="chart-title">不同价格区间销量分布</h2>
                    <div class="chart-wrapper" id="price-bar-chart"></div>
                </div>

                <div class="chart-container">
                    <h2 class="chart-title">连衣裙材质偏好分析</h2>
                    <div class="chart-wrapper" id="material-radar-chart"></div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 动态背景粒子效果
        function createParticles() {
            // 获取背景画布元素
            const canvas = document.getElementById('bg-canvas');
            // 获取 2D 绘图上下文
            const ctx = canvas.getContext('2d');

            // 设置 canvas 尺寸
            function resizeCanvas() {
                // 设置画布宽度为窗口宽度
                canvas.width = window.innerWidth;
                // 设置画布高度为窗口高度
                canvas.height = window.innerHeight;
            }

            // 初始化画布尺寸
            resizeCanvas();
            // 监听窗口大小变化事件，动态调整画布尺寸
            window.addEventListener('resize', resizeCanvas);

            // 创建粒子类
            class Particle {
                constructor() {
                    // 随机生成粒子的 x 坐标
                    this.x = Math.random() * canvas.width;
                    // 随机生成粒子的 y 坐标
                    this.y = Math.random() * canvas.height;
                    // 随机生成粒子的大小
                    this.size = Math.random() * 3 + 1;
                    // 随机生成粒子在 x 轴上的速度
                    this.speedX = Math.random() * 2 - 1;
                    // 随机生成粒子在 y 轴上的速度
                    this.speedY = Math.random() * 2 - 1;
                    // 随机生成粒子的颜色和透明度
                    this.color = `rgba(79, 158, 253, ${Math.random() * 0.5 + 0.1})`;
                }

                update() {
                    // 更新粒子的 x 坐标
                    this.x += this.speedX;
                    // 更新粒子的 y 坐标
                    this.y += this.speedY;

                    // 当粒子超出画布左边界或右边界时，反转 x 轴速度
                    if (this.x < 0 || this.x > canvas.width) {
                        this.speedX = -this.speedX;
                    }
                    // 当粒子超出画布上边界或下边界时，反转 y 轴速度
                    if (this.y < 0 || this.y > canvas.height) {
                        this.speedY = -this.speedY;
                    }
                }

                draw() {
                    // 设置填充颜色
                    ctx.fillStyle = this.color;
                    // 开始绘制路径
                    ctx.beginPath();
                    // 绘制圆形粒子
                    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                    // 填充圆形
                    ctx.fill();
                }
            }

            // 创建粒子数组
            const particles = [];
            // 生成 100 个粒子
            for (let i = 0; i < 100; i++) {
                particles.push(new Particle());
            }

            // 动画循环函数
            function animate() {
                // 清除画布
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                // 更新并绘制每个粒子
                particles.forEach(particle => {
                    particle.update();
                    particle.draw();
                });
                // 请求下一帧动画
                requestAnimationFrame(animate);
            }

            // 开始动画
            animate();
        }

        // 生成随机销售数据
        function generateRandomSalesData() {
            // 定义季节数组
            const seasons = ['春季', '夏季', '秋季', '冬季'];
            // 定义销售数据数组
            const salesData = [];
            // 为每个季节生成随机销售数据
            seasons.forEach(() => {
                salesData.push(Math.floor(Math.random() * 1000) + 100);
            });
            return {
                seasons,
                salesData
            };
        }

        // 生成 3D 图表数据
        function generate3DSalesData() {
            // 定义年份数组
            const years = ['2021', '2022', '2023'];
            // 定义季节数组
            const seasons = ['春季', '夏季', '秋季', '冬季'];
            // 定义数据数组
            const data = [];

            // 遍历年份和季节，生成 3D 数据
            years.forEach((year, yearIdx) => {
                seasons.forEach((season, seasonIdx) => {
                    data.push([
                        seasonIdx, // x 轴: 季节
                        yearIdx,   // y 轴: 年份
                        Math.floor(Math.random() * 800) + 200 // z 轴: 销售额
                    ]);
                });
            });

            return {
                years,
                seasons,
                data
            };
        }

        // 生成连衣裙款式数据
        function generateStyleData() {
            // 定义连衣裙款式数组
            const styles = ['A 字裙', '吊带裙', '娃娃裙', '衬衫裙', '伞裙', '裹身裙'];
            // 定义数据数组
            const data = [];

            // 为每个款式生成随机销售数据
            styles.forEach(style => {
                data.push({
                    value: Math.floor(Math.random() * 300) + 50,
                    name: style
                });
            });

            return data;
        }

        // 生成价格区间数据
        function generatePriceData() {
            // 定义价格区间数组
            const priceRanges = ['0-100 元', '100-200 元', '200-300 元', '300-500 元', '500 元以上'];
            // 定义销售数据数组
            const salesData = [];

            // 为每个价格区间生成随机销售数据
            priceRanges.forEach(() => {
                salesData.push(Math.floor(Math.random() * 800) + 100);
            });

            return {
                priceRanges,
                salesData
            };
        }

        // 生成材质偏好数据
        function generateMaterialData() {
            return {
                indicators: [
                    { name: '棉质', max: 100 },
                    { name: '雪纺', max: 100 },
                    { name: '蕾丝', max: 100 },
                    { name: '牛仔布', max: 100 },
                    { name: '丝绸', max: 100 },
                    { name: '麻料', max: 100 }
                ],
                values: [
                    Math.floor(Math.random() * 80) + 20,
                    Math.floor(Math.random() * 80) + 20,
                    Math.floor(Math.random() * 80) + 20,
                    Math.floor(Math.random() * 80) + 20,
                    Math.floor(Math.random() * 80) + 20,
                    Math.floor(Math.random() * 80) + 20
                ]
            };
        }

        // 生成月度销售数据
        function generateMonthlySalesData() {
            // 定义月份数组
            const months = ['1 月', '2 月', '3 月', '4 月', '5 月', '6 月', '7 月', '8 月', '9 月', '10 月', '11 月', '12 月'];
            // 定义销售数据数组
            const salesData = [];

            // 为每个月生成随机销售数据
            months.forEach(() => {
                salesData.push(Math.floor(Math.random() * 600) + 100);
            });

            return {
                months,
                salesData
            };
        }

        // 初始化 ECharts 图表
        function initCharts() {
            // 季节销售趋势图表
            const seasonSalesChart = echarts.init(document.getElementById('season-sales-chart'));
            // 生成初始季节销售数据
            const initialSeasonData = generateRandomSalesData();

            // 3D 季节销售图表
            const season3DChart = echarts.init(document.getElementById('season-3d-chart'));
            // 生成初始 3D 销售数据
            const initial3DData = generate3DSalesData();

            // 设置 3D 季节销售图表的配置项
            season3DChart.setOption({
                // 设置背景颜色为透明
                backgroundColor: 'transparent',
                // 启用提示框
                tooltip: {},
                // 视觉映射配置
                visualMap: {
                    // 最大值
                    max: 1000,
                    // 颜色范围
                    inRange: {
                        color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                    }
                },
                // x 轴 3D 配置
                xAxis3D: {
                    // 类型为分类
                    type: 'category',
                    // 数据为季节数组
                    data: initial3DData.seasons,
                    // 轴名称
                    name: '季节',
                    // 轴标签样式
                    axisLabel: {
                        color: '#CBD5E1'
                    },
                    // 轴线条样式
                    axisLine: {
                        lineStyle: {
                            color: '#E2E8F0'
                        }
                    }
                },
                // y 轴 3D 配置
                yAxis3D: {
                    // 类型为分类
                    type: 'category',
                    // 数据为年份数组
                    data: initial3DData.years,
                    // 轴名称
                    name: '年份',
                    // 轴标签样式
                    axisLabel: {
                        color: '#CBD5E1'
                    },
                    // 轴线条样式
                    axisLine: {
                        lineStyle: {
                            color: '#E2E8F0'
                        }
                    }
                },
                // z 轴 3D 配置
                zAxis3D: {
                    // 类型为数值
                    type: 'value',
                    // 轴名称
                    name: '销售额',
                    // 轴标签样式
                    axisLabel: {
                        color: '#CBD5E1'
                    },
                    // 轴线条样式
                    axisLine: {
                        lineStyle: {
                            color: '#E2E8F0'
                        }
                    }
                },
                // 3D 网格配置
                grid3D: {
                    // 视图控制配置
                    viewControl: {
                        // 自动旋转
                        autoRotate: true,
                        // 自动旋转速度
                        autoRotateSpeed: 10,
                        // 相机距离
                        distance: 120
                    },
                    // 光照配置
                    light: {
                        // 主光源强度
                        main: {
                            intensity: 1.2
                        },
                        // 环境光强度
                        ambient: {
                            intensity: 0.3
                        }
                    }
                },
                // 系列配置
                series: [{
                    // 类型为 3D 柱状图
                    type: 'bar3D',
                    // 数据
                    data: initial3DData.data,
                    // 着色方式
                    shading: 'color',
                    // 标签配置
                    label: {
                        show: false
                    },
                    // 高亮状态配置
                    emphasis: {
                        label: {
                            show: true,
                            textStyle: {
                                fontSize: 16,
                                color: '#E2E8F0'
                            }
                        },
                        itemStyle: {
                            color: '#4F9EFD'
                        }
                    },
                    // 项目样式配置
                    itemStyle: {
                        opacity: 0.8
                    }
                }]
            });

            // 设置季节销售趋势图表的配置项
            seasonSalesChart.setOption({
                // 设置背景颜色为透明
                backgroundColor: 'transparent',
                // 提示框配置
                tooltip: {
                    // 触发类型为轴
                    trigger: 'axis',
                    // 轴指示器配置
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                // 图例配置
                legend: {
                    // 图例数据
                    data: ['销售额'],
                    // 图例位置
                    top: '5%',
                    left: 'center',
                    // 图例文字样式
                    textStyle: {
                        color: '#E2E8F0'
                    }
                },
                // 网格配置
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                // x 轴配置
                xAxis: {
                    // 类型为分类
                    type: 'category',
                    // 边界间隔
                    boundaryGap: false,
                    // 数据为季节数组
                    data: initialSeasonData.seasons,
                    // 轴线条样式
                    axisLine: {
                        lineStyle: {
                            color: '#E2E8F0'
                        }
                    },
                    // 轴刻度配置
                    axisTick: {
                        show: false
                    },
                    // 轴标签样式
                    axisLabel: {
                        color: '#CBD5E1'
                    }
                },
                // y 轴配置
                yAxis: {
                    // 类型为数值
                    type: 'value',
                    // 轴名称
                    name: '销售额(元)',
                    // 最小值
                    min: 0,
                    // 最大值
                    max: 1500,
                    // 间隔
                    interval: 200,
                    // 轴线条配置
                    axisLine: {
                        show: false
                    },
                    // 轴刻度配置
                    axisTick: {
                        show: false
                    },
                    // 轴标签样式
                    axisLabel: {
                        color: '#CBD5E1'
                    },
                    // 分割线样式
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(226, 232, 240, 0.1)'
                        }
                    }
                },
                // 系列配置
                series: [
                    {
                        // 系列名称
                        name: '销售额',
                        // 类型为折线图
                        type: 'line',
                        // 数据
                        data: initialSeasonData.salesData,
                        // 颜色
                        color: '#4F9EFD',
                        // 区域样式配置
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    { offset: 0, color: 'rgba(79, 158, 253, 0.5)' },
                                    { offset: 1, color: 'rgba(79, 158, 253, 0.05)' }
                                ]
                            }
                        },
                        // 标签配置
                        label: {
                            show: true,
                            position: 'top',
                            color: '#E2E8F0'
                        }
                    }
                ]
            });

            // 连衣裙款式销售占比图表
            const stylePieChart = echarts.init(document.getElementById('style-pie-chart'));
            // 生成连衣裙款式数据
            const styleData = generateStyleData();

            // 设置连衣裙款式销售占比图表的配置项
            stylePieChart.setOption({
                // 设置背景颜色为透明
                backgroundColor: 'transparent',
                // 提示框配置
                tooltip: {
                    // 触发类型为项目
                    trigger: 'item',
                    // 提示框格式化
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                // 图例配置
                legend: {
                    // 图例方向
                    orient: 'vertical',
                    // 图例位置
                    right: '10%',
                    top: 'center',
                    // 图例文字样式
                    textStyle: {
                        color: '#E2E8F0'
                    }
                },
                // 系列配置
                series: [
                    {
                        // 系列名称
                        name: '款式',
                        // 类型为饼图
                        type: 'pie',
                        // 半径范围
                        radius: ['40%', '70%'],
                        // 避免标签重叠
                        avoidLabelOverlap: false,
                        // 标签配置
                        label: {
                            show: true,
                            color: '#E2E8F0',
                            // 标签格式化
                            formatter: '{b}: {d}%'
                        },
                        // 标签线配置
                        labelLine: {
                            show: true
                        },
                        // 数据
                        data: styleData,
                        // 颜色数组
                        color: [
                            '#4F9EFD', '#74C0FC', '#96F2D7', '#FFD43B', '#FF922B', '#FA5252'
                        ]
                    }
                ]
            });

            // 价格区间销量分布图表
            const priceBarChart = echarts.init(document.getElementById('price-bar-chart'));
            // 生成价格区间数据
            const priceData = generatePriceData();

            // 设置价格区间销量分布图表的配置项
            priceBarChart.setOption({
                // 设置背景颜色为透明
                backgroundColor: 'transparent',
                // 提示框配置
                tooltip: {
                    // 触发类型为轴
                    trigger: 'axis',
                    // 轴指示器配置
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                // 图例配置
                legend: {
                    // 图例数据
                    data: ['销量'],
                    // 图例位置
                    top: '5%',
                    left: 'center',
                    // 图例文字样式
                    textStyle: {
                        color: '#E2E8F0'
                    }
                },
                // 网格配置
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                // x 轴配置
                xAxis: {
                    // 类型为分类
                    type: 'category',
                    // 数据为价格区间数组
                    data: priceData.priceRanges,
                    // 轴线条样式
                    axisLine: {
                        lineStyle: {
                            color: '#E2E8F0'
                        }
                    },
                    // 轴刻度配置
                    axisTick: {
                        show: false
                    },
                    // 轴标签样式
                    axisLabel: {
                        color: '#CBD5E1'
                    }
                },
                // y 轴配置
                yAxis: {
                    // 类型为数值
                    type: 'value',
                    // 轴名称
                    name: '销量(件)',
                    // 轴线条配置
                    axisLine: {
                        show: false
                    },
                    // 轴刻度配置
                    axisTick: {
                        show: false
                    },
                    // 轴标签样式
                    axisLabel: {
                        color: '#CBD5E1'
                    },
                    // 分割线样式
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(226, 232, 240, 0.1)'
                        }
                    }
                },
                // 系列配置
                series: [
                    {
                        // 系列名称
                        name: '销量',
                        // 类型为柱状图
                        type: 'bar',
                        // 数据
                        data: priceData.salesData,
                        // 颜色
                        color: '#74C0FC',
                        // 标签配置
                        label: {
                            show: true,
                            position: 'top',
                            color: '#E2E8F0'
                        }
                    }
                ]
            });

            // 材质偏好雷达图
            const materialRadarChart = echarts.init(document.getElementById('material-radar-chart'));
            // 生成材质偏好数据
            const materialData = generateMaterialData();

            // 设置材质偏好雷达图的配置项
            materialRadarChart.setOption({
                // 设置背景颜色为透明
                backgroundColor: 'transparent',
                // 提示框配置
                tooltip: {
                    // 触发类型为项目
                    trigger: 'item'
                },
                // 图例配置
                legend: {
                    // 图例数据
                    data: ['材质偏好度'],
                    // 图例位置
                    top: '5%',
                    left: 'center',
                    // 图例文字样式
                    textStyle: {
                        color: '#E2E8F0'
                    }
                },
                // 雷达图配置
                radar: {
                    // 指示器配置
                    indicator: materialData.indicators,
                    // 形状为圆形
                    shape: 'circle',
                    // 分割数量
                    splitNumber: 5,
                    // 轴名称样式
                    axisName: {
                        color: '#CBD5E1'
                    },
                    // 分割线样式
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(226, 232, 240, 0.1)'
                        }
                    },
                    // 分割区域样式
                    splitArea: {
                        show: true,
                        areaStyle: {
                            color: ['rgba(255, 255, 255, 0.05)', 'rgba(255, 255, 255, 0.1)']
                        }
                    },
                    // 轴线条样式
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(226, 232, 240, 0.2)'
                        }
                    }
                },
                // 系列配置
                series: [
                    {
                        // 系列名称
                        name: '材质偏好度',
                        // 类型为雷达图
                        type: 'radar',
                        // 数据
                        data: [
                            {
                                value: materialData.values,
                                name: '材质偏好度'
                            }
                        ],
                        // 颜色
                        color: '#96F2D7',
                        // 区域样式配置
                        areaStyle: {
                            color: 'rgba(150, 242, 215, 0.3)'
                        }
                    }
                ]
            });

            // 月度销售玫瑰图
            const monthlySalesChart = echarts.init(document.getElementById('monthly-sales-chart'));
            // 生成月度销售数据
            const monthlyData = generateMonthlySalesData();

            // 设置月度销售玫瑰图的配置项
            monthlySalesChart.setOption({
                // 设置背景颜色为透明
                backgroundColor: 'transparent',
                // 标题配置
                title: {
                    // 标题文字
                    text: '月度销售玫瑰图',
                    // 标题位置
                    left: 'center',
                    // 标题文字样式
                    textStyle: {
                        color: '#E2E8F0'
                    }
                },
                // 提示框配置
                tooltip: {
                    // 触发类型为项目
                    trigger: 'item',
                    // 提示框格式化
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                // 图例配置
                legend: {
                    // 图例位置
                    top: '5%',
                    left: 'center',
                    // 图例文字样式
                    textStyle: {
                        color: '#E2E8F0'
                    }
                },
                // 系列配置
                series: [
                    {
                        // 系列名称
                        name: '销售额',
                        // 类型为饼图（玫瑰图）
                        type: 'pie',
                        // 半径范围
                        radius: ['30%', '70%'],
                        // 圆心位置
                        center: ['50%', '60%'],
                        // 玫瑰图类型为半径
                        roseType: 'radius',
                        // 项目样式配置
                        itemStyle: {
                            // 圆角
                            borderRadius: 8,
                            // 边框颜色
                            borderColor: '#1E293B',
                            // 边框宽度
                            borderWidth: 2
                        },
                        // 标签配置
                        label: {
                            color: '#E2E8F0',
                            // 标签格式化
                            formatter: '{b}: {c}'
                        },
                        // 标签线配置
                        labelLine: {
                            lineStyle: {
                                color: 'rgba(226, 232, 240, 0.3)'
                            },
                            // 平滑度
                            smooth: 0.2,
                            // 第一段长度
                            length: 10,
                            // 第二段长度
                            length2: 20
                        },
                        // 数据
                        data: monthlyData.months.map((month, index) => {
                            return {
                                value: monthlyData.salesData[index],
                                name: month,
                                itemStyle: {
                                    color: [
                                        '#FFD43B', '#FFAB00', '#FF8A00', '#FF6D00',
                                        '#FF5252', '#FF4081', '#E040FB', '#7C4DFF',
                                        '#536DFE', '#448AFF', '#40C4FF', '#18FFFF'
                                    ][index]
                                }
                            };
                        }),
                        // 动画类型
                        animationType: 'scale',
                        // 动画缓动函数
                        animationEasing: 'elasticOut',
                        // 动画延迟
                        animationDelay: function (idx) {
                            return Math.random() * 200;
                        }
                    }
                ]
            });

            // 设置定时更新数据
            let refreshInterval = 5000; // 默认 5 秒
            let refreshTimer = null;

            function startRefreshTimer() {
                // 清除之前的定时器
                if (refreshTimer) clearInterval(refreshTimer);
                if (refreshInterval > 0) {
                    // 设置新的定时器
                    refreshTimer = setInterval(() => {
                        // 更新季节销售数据
                        const newSeasonData = generateRandomSalesData();
                        seasonSalesChart.setOption({
                            xAxis: {
                                data: newSeasonData.seasons
                            },
                            series: [
                                {
                                    data: newSeasonData.salesData
                                }
                            ]
                        });

                        // 更新 3D 图表数据
                        const new3DData = generate3DSalesData();
                        season3DChart.setOption({
                            xAxis3D: {
                                data: new3DData.seasons
                            },
                            yAxis3D: {
                                data: new3DData.years
                            },
                            series: [
                                {
                                    data: new3DData.data
                                }
                            ]
                        });

                        // 更新款式销售占比数据
                        const newStyleData = generateStyleData();
                        stylePieChart.setOption({
                            series: [
                                {
                                    data: newStyleData
                                }
                            ]
                        });

                        // 更新价格区间数据
                        const newPriceData = generatePriceData();
                        priceBarChart.setOption({
                            xAxis: {
                                data: newPriceData.priceRanges
                            },
                            series: [
                                {
                                    data: newPriceData.salesData
                                }
                            ]
                        });

                        // 更新材质偏好数据
                        const newMaterialData = generateMaterialData();
                        materialRadarChart.setOption({
                            series: [
                                {
                                    data: [
                                        {
                                            value: newMaterialData.values
                                        }
                                    ]
                                }
                            ]
                        });

                        // 更新月度销售数据
                        const newMonthlyData = generateMonthlySalesData();
                        monthlySalesChart.setOption({
                            series: [{
                                data: newMonthlyData.months.map((month, index) => {
                                    return {
                                        value: newMonthlyData.salesData[index],
                                        name: month
                                    };
                                })
                            }]
                        });
                    }, refreshInterval);
                }
            }

            // 开始定时刷新
            startRefreshTimer();

            // 监听窗口大小变化，调整图表
            window.addEventListener('resize', () => {
                seasonSalesChart.resize();
                season3DChart.resize();
                stylePieChart.resize();
                priceBarChart.resize();
                materialRadarChart.resize();
                monthlySalesChart.resize();
            });
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', () => {
            // 创建动态背景粒子效果
            createParticles();
            // 初始化 ECharts 图表
            initCharts();

            // 导出功能交互
            const exportBtn = document.getElementById('export-btn');
            const exportMenu = document.getElementById('export-menu');

            // 点击导出按钮时显示或隐藏导出菜单
            exportBtn.addEventListener('click', (e) => {
                e.stopPropagation();
                exportMenu.classList.toggle('hidden');
            });

            // 点击页面其他地方时隐藏导出菜单
            document.addEventListener('click', () => {
                exportMenu.classList.add('hidden');
            });

            // 阻止导出菜单内的点击事件冒泡
            exportMenu.addEventListener('click', (e) => {
                e.stopPropagation();
            });

            // 为每个导出选项添加点击事件监听器
            document.querySelectorAll('.export-option').forEach(option => {
                option.addEventListener('click', (e) => {
                    e.preventDefault();
                    // 获取导出类型
                    const type = e.currentTarget.getAttribute('data-type');
                    // 导出图表
                    exportChart('season-sales-chart', type);
                    // 隐藏导出菜单
                    exportMenu.classList.add('hidden');
                });
            });
        });
    </script>
</body>

</html>